import { Graph, Node } from '@antv/x6';
import { v4 as guid } from "uuid";
import { CellType } from '../enums';
import { FieldUpdatedEvent, PiplineConifg } from '../models';
import { cornerRadio } from './cornerRadio';
import { Constance } from './nodes-util';
import { Logger } from 'src/service/logger';

export class PiplineNode extends Node {
  static ShapeName = "pipline";

  static register() {
    Graph.registerNode(PiplineNode.ShapeName, PiplineNode, true);
  }

  static unregister() {
    Graph.unregisterNode(PiplineNode.ShapeName);
  }

  static getMeta(cfg?: PiplineConifg): Node.Metadata {
    const { pipline: _size } = Constance.sizes;
    const size = { width: cfg?.Width ?? _size.width, height: cfg?.Height ?? _size.height };

    const position = { x: cfg?.X ?? 0, y: cfg?.Y ?? 0 };

    const config: PiplineConifg = {
      Id: cfg?.Id ?? guid(),
      Name: cfg?.Name ?? "输送线",
      Width: size.width,
      Height: size.height,
      X: position.x,
      Y: position.y,
      Plc: cfg?.Plc ?? {
        Ip: "",
        Port: 102,
        Interval: 1000,
      },
      Sites: cfg?.Sites ?? [],
      Status: cfg?.Status ?? {
        Id: guid(),
        Name: "Status",
        Description: "输送线状态",
        FontSize: 12,
        Visible: true,
        Maps: []
      },
      Type: CellType.Pipline
    };

    const meta = {
      shape: PiplineNode.ShapeName,
      id: config.Id,
      width: config.Width,
      height: config.Height,
      x: config.X,
      y: config.Y,
      label: config.Name,
      attrs: {
        title: {
          text: config.Name,
        },
        plc: {
          text: `PLC[${config.Plc.Ip}:${config.Plc.Port}]`,
        }
      },
      data: {
        parent: true,
        cfg: {
          Name: config.Name,
          Type: CellType.Pipline,
          Plc: { ...config.Plc },
          Status: { ...config.Status }
        },
      },
    };

    return meta;
  }

  update(cfg: PiplineConifg) {
    this.attr('title/text', cfg.Name);
    this.attr("plc/text", `PLC[${cfg.Plc.Ip ?? 'ip'}:${cfg.Plc.Port ?? 'port'}]`);//pcl
    this.data.cfg = cfg;
  }

  fieldValueUpdated(e: FieldUpdatedEvent) {
    const { cfg }: { cfg: PiplineConifg; } = this.data;
    this.data.Values = e.Values;


    let key = "Status";
    if (Object.prototype.hasOwnProperty.call(e.Values, key)) {
      const statusVal = e.Values["Status"];
      const status = cfg.Status.Maps.find(a => a.Key == statusVal);
      if (status) {
        const color = status.Color;
        this.attr("status/fill", color);
        this.attr("status/text", `状态：${status.Description}`);
      } else {
        const color = "red";
        this.attr("status/fill", color);
        this.attr("status/text", `状态：${statusVal}`);
      }
    }
  }

  getConfig(): PiplineConifg {
    const { x, y } = this.position();
    const { width, height } = this.size();
    const cfg: PiplineConifg = {
      ...this.data.cfg,
      Id: this.id,
      X: x,
      Y: y,
      Width: width,
      Height: height,
      Type: CellType.Pipline,
    };

    return cfg;
  }

  logger?: Logger;
  setLogger(logger: Logger) {
    this.logger = logger;
  }

  bindPositionAndSizeChange() {
    this.on("change:position", ({ current }) => {
      const cfg = {
        ...this.data.cfg,
        X: current?.x,
        Y: current?.y
      };
      this.data.cfg = cfg;
    });
    this.on("change:size", ({ current }) => {
      const cfg = {
        ...this.data.cfg,
        Width: current?.width,
        Height: current?.height
      };
      this.data.cfg = cfg;
    });
  }
}

PiplineNode.config(
  {
    width: 200,
    height: 60,
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'text',
        selector: 'title',
      },
      {
        tagName: "text",
        selector: "plc",
      },
      {
        tagName: "text",
        selector: "status",
      },
      {
        tagName: 'image',
        selector: 'bg',
        className: 'svg-background',
      },
    ],
    attrs: {
      bg: {
        refWidth: 1,
        refHeight: 1,
        opacity: 0.2,
        width: 0,
        height: 0
      },
      body: {
        refWidth: 1,
        refHeight: 1,
        strokeDasharray: '1 5',
        strokeDashoffset: 2.5,
        stroke: '#8f8f8f',
        strokeWidth: 0.5,
        fill: '#cccccc11',
        ...cornerRadio
      },
      title: {
        text: '输送线',
        class: 'text-shadow-1',
        refX: '100%',
        refY: '100%',
        x: -10,
        y: -10,
        fill: 'rgba(255,255,255,0.25)',
        fontSize: 20,
        textAnchor: 'end',
        textVerticalAnchor: 'bottom',
      },
      plc: {
        text: 'PLC',
        class: 'text-shadow-1',
        refX: '0%',
        refY: '100%',
        x: 10,
        y: -10,
        fill: 'rgba(255,255,255,0.25)',
        fontSize: 16,
        textAnchor: 'start',
        textVerticalAnchor: 'bottom',
      },
      status: {
        text: '状态',
        class: 'text-shadow-1',
        refX: '0%',
        refY: '100%',
        x: 10,
        y: -30,
        fill: 'rgba(255,255,255,0.25)',
        fontSize: 12,
        textAnchor: 'start',
        textVerticalAnchor: 'bottom',
      }
    },
  }
);

